<template>
	<div class="a_SleepRecord-container">
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
			<el-form :model="queryParams" ref="queryForm" :inline="true">
				<!--				<el-form-item label="持续时间">-->
				<!--					<el-input v-model="queryParams.duration" clearable placeholder="请输入持续时间" />-->
				<!--				</el-form-item>-->

				<el-form-item label="日期">
					<el-date-picker v-model="queryParams.dateMonth" type="month" />
				</el-form-item>

				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="getDataMonth">查询</el-button>
						<el-button icon="ele-Refresh" @click="() => (queryParams = {})">重置</el-button>
					</el-button-group>
				</el-form-item>
			</el-form>
		</el-card>

		<el-card shadow="hover" style="margin-top: 8px">
			<div ref="chartRef" style="height: 500px"></div>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, markRaw, onMounted, toRef, toRefs, computed } from 'vue';
import * as echarts from 'echarts';
// import * as echarts from 'echarts';
// import { ElMessageBox, ElMessage } from 'element-plus';
import { monthSearch } from '/src/api/develop/sleepRecord';
import { formatDate } from '/@/utils/formatTime';
// import { getAPI } from '/src/utils/axios-utils';
// import { SysEnumApi } from '/src/api-services/api';

const chartRef = ref();
const queryParams = ref<any>({});

const state = reactive({
	echarts: {
		domChartOne: null,
	} as any,
});
const monthObj = reactive({
	startList: [] as any,
	endList: [] as any,
	nowList: [] as any,
	durList: [] as any,
});
const init = () => {
	state.echarts.domChartOne = markRaw(echarts.init(chartRef.value));
	state.echarts.domChartOne.setOption(monthOptions());
};

// 查询操作
const getDataMonth = async () => {
	let objInput = {
		year: queryParams.value.dateMonth.getFullYear(),
		month: queryParams.value.dateMonth.getMonth() + 1,
	};
	monthObj.nowList = [];
	monthObj.durList = [];
	var res = await monthSearch(objInput);
	let list = res.data.result;

	list.forEach((e: any) => {
		let min = 0;
		min = Number(e.duration.toString().substr(3, 2)) / 60;
		min = Number(min.toFixed(2));
		// monthObj.startList.push(e.startTime.toString().substring(11, 13));
		// monthObj.endList.push(e.endTime.toString().substring(11));
		monthObj.nowList.push(formatDate(e.nowTime, 'YYYY-mm-dd').toString().substring(8, 11) + '号');
		monthObj.durList.push(Number(e.duration.toString().substr(0, 2)) + min);
	});
	init();
};

//echarts
const monthOptions = () => {
	let color = ['#fce348']; // 线条颜色
	let visualMap = [] as any;
	var mothName = monthObj.nowList;

	var echartData = [monthObj.durList]; // value值   例:[[0,0,0,0,0],[0,0,0,0,0]]

	let legendItem = ['时间']; // 图例项目  例:["飞机","汽车"]
	let danWei = ''; // 单位
	let upColor = ['#618564', '#5795e0', '#ff7474']; //超出标准线折线图的颜色
	let region = [6, 9]; //区域值
	color.map((item, index) => {
		visualMap.push({
			type: 'piecewise',
			show: false,
			dimension: 1,
			seriesIndex: index,
			pieces: [
				{
					gt: region[1],
					color: upColor[1], //偏高
				},
				{
					gte: region[0],
					lte: region[1],
					color: upColor[0], //正常
				},
				{
					lt: region[0],
					color: upColor[2], //偏低
				},
			],
			outOfRange: {
				// 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
				color: color[index],
			},
		});
	});
	const seriesfun = (data: any, legend: any) => {
		let statistics = new Array();
		for (let i = 0; i < data.length; i++) {
			let stiac = {
				name: legend[i],
				type: 'line',
				// symbol: "circle", // 默认空心圆
				smooth: false, //是否平滑
				showSymbol: true, // 是否默认展示圆点
				symbolSize: 6, //设定实心点的大小
				label: {
					show: true, // 线条折点处显示值
					position: 'top',
					formatter: function (params: any) {
						let geV;
						if (region[1] > params.value && params.value >= region[0]) {
							geV = params.value + '中';
						} else if (params.value >= region[1]) {
							geV = params.value + '高';
						} else {
							geV = params.value + '低';
						}
						return geV;
					},
				},
				zlevel: 3,
				//标记线
				markLine: {
					silent: true,
					lineStyle: {
						color: 'red',
					},
					data: [
						{
							yAxis: region[0],
						},
						{
							yAxis: region[1],
						},
					],
				},
				data: data[i],
			};
			statistics.push(stiac);
		}
		return statistics;
	};
	const option = {
		backgroundColor: '#ffffff',
		title: {
			show: true, //是否显示标题，默认显示，可以不设置
			text: 'Sleep Time', //图表标题文本内容
			textStyle: {
				//标题内容的样式
				color: 'rgb(0, 0, 0,1)',
				fontStyle: 'normal', //lic主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
				fontWeight: 'bolder', //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
				fontFamily: 'san-serif', //主题文字字体，默认微软雅黑
				fontSize: 18, //主题文字字体大小，默认为18px
			},
			left: 'center', //。
			top: '20px', //
			// right: "auto",//
			// bottom: "auto",
		},
		//超出标准线颜色
		visualMap: visualMap,
		color: color,
		legend: {
			center: true, // 对齐方式
			top: '13%', // 头部距离
			left: 'center',
			data: legendItem,
			itemWidth: 15,
			itemHeight: 10,
			itemGap: 30,
			icon: 'roundRect', // rect 矩形   circle 圆点   line 线条  triangle三角形  roundRect 圆角矩形  arrow 箭头
			textStyle: {
				color: 'rgb(0, 0, 0,1)',
				fontSize: '16',
			},
		},
		// calculable: true,
		tooltip: {
			trigger: 'axis',
			formatter: function (params: any) {
				let html = '';
				params.forEach((v: any) => {
					html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.seriesName} ${v.name}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                ${danWei}`;
				});

				return html;
			},
			extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
		},
		grid: {
			top: '25%',
			right: '5%',
			left: '10%',
			bottom: '20%',
		},
		xAxis: [
			{
				type: 'category',
				axisTick: {
					symbol: 'arrow',
					lineStyle: {
						type: 'dashed',
						// ...
					},
				},
				axisLine: {
					show: true,
					lineStyle: {
						type: 'solid',
						color: 'rgb(0, 0, 0,1)',
					},
				},
				// X轴上的 字体样式
				axisLabel: {
					inside: false,
					// rotate: 30,
					color: 'rgb(0, 0, 0,0.8)', // x轴颜色
					fontWeight: 'normal',
					fontSize: '16',
					lineHeight: 22,
				},
				data: mothName,
			},
		],
		yAxis: [
			{
				type: 'value',
				name: '',
				axisLabel: {
					color: 'rgb(0, 0, 0,0.8)',
					fontSize: '14',
				},
				// 单位
				nameTextStyle: {
					color: 'rgba(255, 255, 255,0.7)',
					fontSize: '14',
					lineHeight: 40,
					padding: [0, -1040, -10, 0], // 上右下左与原位置距离
				},
				splitLine: {
					show: true, // 是否显示 Y轴线条
					lineStyle: {
						type: 'solid', // solid实线   dashed虚线
						color: 'rgb(0, 0, 0,0.3)',
					},
				},

				axisLine: {
					show: false, // 是否显示 Y轴刻度线条
					lineStyle: {
						type: 'dashed',
						color: 'rgb(47, 105, 212);',
					},
				},
				axisTick: {
					show: false,
				},
			},
		],
		series: seriesfun(echartData, legendItem, color),
	};
	return option;
};

// handleQuery();
onMounted(async () => {
	queryParams.value.dateMonth = new Date();
	await getDataMonth();
	setTimeout(() => {
		init();
	}, 10);
});
</script>
